<template>
  <div class="el-box-row">
    <CourseSection />
    <div class="el-data">
      <template v-if="listDatas.length > 0">
        <div class="el-course-box">
          <el-row v-for="item in listDatas" :key="item.courseId">
            <el-col :span="3">
              <div class="grid-content el-data-img" @click="clickTo(item)">
                <a><img :src="img_src(item.courseCoverPath)" alt="" /></a>
              </div>
            </el-col>
            <el-col :span="15">
              <div class="grid-content el-data-info">
                <el-row class="el-data-theme">
                  <el-col :span="24">
                    <div class="grid-content" @click="clickTo(item)">
                      <a>{{ item.courseName }}</a>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <span class="el-data-info-item">学段：{{ item.courseGradeName }}</span>
                    <span class="el-data-info-item">学科：{{ item.courseSubjectName }}</span>
                    <span class="el-data-info-item">版本：{{ item.courseVersionName }}</span>
                    <span class="el-data-info-item">册别：{{ item.courseVolumeName }}</span>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <span class="el-price">&yen;{{ item.coursePrice }}</span>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content el-data-btn">
                <template v-if="!item.isBuy">
                  <el-button type="primary" @click="addToCart(item)"
                    :disabled="item.addCartF? true : false">
                    {{item.addCartF?'已加入购物车':'加入购物车'}}</el-button>
                  <el-button type="danger" @click="buyNow(item)">立即购买</el-button>
                </template>
                <template v-else>
                  <span>已购买</span>
                </template>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="width:100%;height:35px;"></div>
        <div class="el-page">
          <el-pagination :layout="listPages.layout" :current-page="listPages.page" :page-sizes="listPages.sizes"
            :page-size="listPages.size" :total="listPages.total" :prev-text="listPages.prevtext"
            :next-text="listPages.nexttext" :page-count="listPages.count" :pageer-count="listPages.counter"
            :hide-on-single-page="listPages.single" @size-change="page_size_change"
            @current-change="page_current_change" @prev-click="page_prev_click" @next-click="page_next_click">
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="scss" src="./index.scss"></style>
